<template>
  <div class="box">
    <div class="title">积分商场管理系统</div>
    <div class="dlk">
      <div style="margin: 20px" />
      <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 600px">
        <el-form-item label="">
          <el-input placeholder="用户名" v-model="formLabelAlign.uesr" />
        </el-form-item>
        <el-form-item label="">
          <el-input type="password" placeholder="密码" v-model="formLabelAlign.pwd" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>


</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import storage from '../utils/storage'
const router = useRouter()
const labelPosition = ref('right')

const formLabelAlign = reactive({
  uesr: '',
  pwd: '',
})
const submitForm = () => {
       axios({
         url:"http://localhost:3001/login",
         method:"post",
         data:{
        ...formLabelAlign
         }
       }).then((res)=>{
        
       if(res.data.data.length >=1){
        
         storage.setStorage('user', res.data.data[0].user)
        router.push({
             path:'/home'
         })

       }else{
       alert('账号或密码错误，请重新输入')
        formLabelAlign.pwd = ''
       }
       })
        //  console.log(formLabelAlign);
         
  // router.push({
  //   path: '/home'
  // })

}
const resetForm = () => {
  formLabelAlign.name = '',
    formLabelAlign.pwd = ''
}
</script>

<style scoped>
.box{
  background: url(../../public/img/202268143944.jpg) fixed  no-repeat 0%/cover content-box content-box ;
}
.el-form-item {
  margin-top: 30px;

}

.el-input {
  width: 240px;

}

.el-form {
  padding-top: 10px;
}

.title {
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  color: rgb(61,62,63);
}

.box {
  height: 100%;
  width: 100%;
  background-color: rgb(20, 20, 20);
  box-sizing: border-box;

}

.dlk {
  width: 420px;
  height: 270px;
  position: absolute;
  top: 45%;
  left: 20%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  /* border: 1px solid #cccc; */
  background-color: rgb(219,232,246);




}
</style>>

